button {
  background-color: #2B60DE;
  font-size: 110%;
  border: 0;
  padding: 7px 14px;
  color: white;
  text-transform: uppercase;
  border: #0020C2 2px solid;
  box-shadow: 0px 0px 2px 0 lightblue;
}

button:hover {
  background-color: black;
  border: white 2px solid;
  transition: 1s ease-in;
  color: white;
}

/* animated scroll down button */
.down {
  a {
    position: absolute;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-decoration: none;
    padding-top: 60px;
    color: #fff;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
  }

  a:hover {
    opacity: .5;
  }

  a span {
    position: absolute;
    width: 46px;
    height: 46px;
    top: 10vh;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
  }

  a span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }

  a span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb 3s infinite;
    animation: sdb 3s infinite;
    box-sizing: border-box;
  }

  @-webkit-keyframes sdb {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes sdb {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}